<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="root">
        <div class="outer">
            <div class="todo-container">
                <!-- 头部 -->
                <div class="todo-header">
                    <input @keyUp.enter="addContent" type="text" id="newTodo" placeholder="请输入您的任务，回车确认">
                </div>
                <!-- 内容展示区域 -->
                <ul class="todo-main">
                    <li class="todo-list" v-for="item in todoList" :key="item.id" @mouseenter="show(item.id)" @mouseleave="show(item.id)">
                        <label>
                            <input @click="modifyById(item.id)" type="checkbox" :checked="item.isChecked">
                            <span>{{item.value}}</span>
                        </label>
                        <button v-show="item.isShow" @click="removeById(item.id)" class="btn btn-danger">删除</button>
                    </li>
                </ul>
                <!-- 底部区域 -->
                <div class="todo-footer">
                    <label>
                        <input @click="checkedAll" :checked="checkAll" type="checkbox" id="checkAll">
                    </label>
                    <span>
                        已完成 <span id="allComplateTodos">{{accomplishCount}}</span>
                        /全部 <span id="allTodos">{{totalCount}}</span>
                    </span>
                    <button @click="removeAll" id="removeAllComplate" class="btn btn-danger">清除已完成任务</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false;	 // 阻止 Vue在启动时生成生产提示
        
        const vm = new Vue({
            el: "#root", // 挂载的容器
            data() { // 数据
                return {
                    todoList:[
                        {
                            id:1,
                            value:'抽烟',
                            isChecked:true,
                            isShow:false
                        },
                        {
                            id:2,
                            value:'喝酒',
                            isChecked:false,
                            isShow:false
                        },
                        {
                            id:3,
                            value:'烫头',
                            isChecked:false,
                            isShow:false
                        }
                    ],
                    count:0, // 初始已完成数量
                    total:0, // 初始总数量
                    checkall:false, // 初始全选框状态
                }
            },
            methods: {
                // 添加数据
                addContent(e){
                    const {todoList} = this;
                    const result = todoList.find(item => item.value === e.target.value.trim() )
                    if(result){
                        alert("您添加的内容已重复！！！")
                        e.target.value='';
                        return
                    }
                    if(e.target.value.trim().length === 0) return alert("输入的内容不能为空")
                    this.todoList.push({
                        id:todoList.length + 1,
                        value:e.target.value.trim(),
                        isChecked:false
                    })
                    e.target.value='';
                },
                // 根据id修改选中状态
                modifyById(id){
                    let result = this.todoList.find(item => item.id === id )
                    result.isChecked = ! result.isChecked
                },
                // 根据id删除数据
                removeById(id){
                    this.todoList =this.todoList.filter(item => !(item.id === id))
                },
                // 全选
                checkedAll(){
                    this.todoList = this.todoList.map(item => {
                        item.isChecked = !this.checkall
                        return item
                    })
                },
                // 批量删除
                removeAll(){
                    this.todoList =this.todoList.filter(item => item.isChecked === false)
                },
                show(id){
                    let result = this.todoList.find(item => item.id === id )
                    result.isShow = !result.isShow
                }
            },
            computed:{
                // 完成数量
                accomplishCount(){
                    this.count = this.todoList.filter(item => item.isChecked === true).length;
                    return this.count
                },
                // 总数量
                totalCount(){
                    this.total = this.todoList.length;
                    return this.total
                },
                // 全选状态
                checkAll(){
                    if(this.count !== 0){
                        return this.count === this.total ? this.checkall=true : this.checkall=false
                    }else{
                        return this.checkall=false
                    }
                }
            }
        })
</script>
</body>

</html>